<template>
    <div id="information">
        <div id="gis"></div>
        <div class="gisTool">
            <gis-tool></gis-tool>
        </div>
        <div class="table">
            <div class="inner">
                <div class="tabs">
                    <div class="tab-item"  @click="selectThis(index)" :class="{actived:index==activedIndex}" v-for="(item,index) in tabs" :key="index">
                        {{item.name}}
                    </div>
                </div>
                <div class="row">
                    <span>巡检人员:</span>
                     <el-select v-model="itemPeople" placeholder="请选择">
                        <el-option
                        v-for="item in people"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <div class="row">
                    <span>巡检区域:</span>
                     <el-select v-model="itemPeople" placeholder="请选择">
                        <el-option
                        v-for="item in people"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <div class="row">
                    <span>从:</span>
                     <el-date-picker
                        v-model="startValue"
                        type="date"
                        placeholder="日期">
                    </el-date-picker>
                    <span>到:</span>
                     <el-date-picker
                        v-model="endValue"
                        type="date"
                        placeholder="日期">
                    </el-date-picker>
                    <el-button type="primary">搜索</el-button>
                </div>
                <div class="content">
                    <table>
                        <thead>
                            <tr>
                                <th><span>巡检区域</span></th>
                                <th><span>完成率</span></th>
                                <th><span>巡检日期</span></th>
                                <th><span>巡检进度</span></th>
                                <th><span>巡检人员</span></th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><span>巡检区域</span></td>
                                <td><span>80%</span></td>
                                <td><span>2018.02.04-2018.05.31</span></td>
                                <td><span>33%</span></td>
                                <td><span>王龙</span></td>
                            </tr>
                             <tr>
                                <td><span>巡检区域</span></td>
                                <td><span>80%</span></td>
                                <td><span>2018.02.04-2018.05.31</span></td>
                                <td><span>33%</span></td>
                                <td><span>王龙</span></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="pagination">
                     <el-pagination
                        layout="prev, pager, next"
                        :total="1000">
                    </el-pagination>
                </div>
            </div>
            
        </div>
    </div>

</template>

<script>
import gisTool from "@/common/components/gis_units/tools";
export default {
  components: {
    gisTool
  },
  data() {
    return {
      tabs: [
        {
          name: "实时信息"
        },
        {
          name: "巡检计划"
        },
        {
          name: "管网抢修"
        },
        {
          name: "巡检记录"
        }
      ],
      activedIndex: 0, // 激活的tabs
      people: [
        //巡检人员
        {
          value: "选项1",
          label: "黄金糕"
        },
        {
          value: "选项2",
          label: "双皮奶"
        },
        {
          value: "选项3",
          label: "蚵仔煎"
        },
        {
          value: "选项4",
          label: "龙须面"
        },
        {
          value: "选项5",
          label: "北京烤鸭"
        }
      ],
      itemPeople: "", //选中的巡检人员
      startValue: "", //开始时间
      endValue: "", //结束时间
      tableData: []
    };
  },
  methods: {
    selectThis(index) {
      this.activedIndex = index;
    }
  }
};
</script>

<style lang="scss" scoped>
$baseFont: 14px;
$baseColor: #333;
$borderColor: #ccc;
#information {
  width: 100%;
  height: 100%;
  position: relative;
  #gis {
    width: 100%;
    height: 100%;
  }
  .gisTool {
    position: absolute;
    right: 20px;
    top: 20px;
    width: 400px;
    height: 30px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    border-radius: 5px;
  }
  .table {
    height: calc(100% - 70px);
    position: absolute;
    top: 70px;
    right: 20px;
    .inner {
      height: calc(100% - 50px);
      width: 400px;
      position: relative;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
      .tabs {
        width: 100%;
        display: flex;
        justify-content: flex-start;
        font-size: $baseFont;
        color: $baseColor;
        background: rgb(227, 237, 239);
        height: 25px;
        line-height: 25px;
        .tab-item {
          width: 70px;
          text-align: center;
          border-right: 1px solid #ccc;
          cursor: pointer;
          &.actived {
            background: rgb(11, 131, 254);
            color: #fff;
          }
          &:last-child {
            border-right: none;
          }
        }
      }
      .row {
        width: 100%;
        display: flex;
        justify-content: space-between;
        height: 30px;
        line-height: 30px;
        font-size: $baseFont;
        margin: 10px 0;
        padding: 0 10px;
        span {
          display: inline-block;
          width: 60px;
        }
        .el-select {
          width: calc(100% - 80px);
        }
        .el-button {
          margin-left: 4px;
        }
      }
      .content {
        width: 100%;
        height: calc(100% - 185px);
        overflow-y: auto;
        table {
          width: 100%;
          border-spacing: 0;
          border-top: 1px solid #ccc;
          font-size: $baseFont;
          text-align: center;
          thead {
            width: 100%;
            tr {
                width: 100%;
              th {
                width: 20%;
                height: 25px;
                line-height: 25px;
                border-right: 1px solid #ccc;
                border-bottom: 1px solid #ccc;
                &:last-child {
                  border-right: none;
                }
              }
            }
          }
          tbody {
              width: 100%;
              height: calc(100% - 30px);
              overflow-y: auto;
            tr {
                width: 100%;
              td {
                  width: 20%;
                // height: 25px;
                line-height: 25px;
                border-right: 1px solid #ccc;
                border-bottom: 1px solid #ccc;
                &:last-child {
                  border-right: none;
                }
              }
            }
          }
        }
      }
      .pagination{
        width: 100%;
        display: flex;
        justify-content: center;
      }
    }
  }
}
</style>


